<template>
	<AdminLayout activeKey="audit-history" :breadcrumbs="['首页','内容管控','审核记录查询']" tabTitle="审核记录查询" currentPage="audit-history">
		<view class="page">
			<!-- 页面头部 -->
			<view class="page-header">
				<view class="header-info">
					<text class="page-title">审核记录查询</text>
					<text class="page-subtitle">查看和分析所有审核操作记录</text>
				</view>
				<view class="header-actions">
					<button class="btn-export" @click="exportHistory">
						<text class="btn-icon iconfont icon-daochu"></text>
						导出记录
					</button>
				</view>
			</view>

		<!-- 统计概览 -->
		<view class="stats-overview">
			<view class="stat-item">
				<text class="stat-label">今日审核</text>
				<text class="stat-value">{{ realTimeStats.today }}</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">本周审核</text>
				<text class="stat-value">{{ realTimeStats.week }}</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">通过率</text>
				<text class="stat-value success">{{ realTimeStats.approveRate }}%</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">拒绝率</text>
				<text class="stat-value danger">{{ realTimeStats.rejectRate }}%</text>
			</view>
		</view>

			<!-- 筛选工具栏 -->
			<view class="filter-section">
				<view class="filter-row">
					<view class="filter-group">
						<text class="filter-label">内容类型</text>
						<view class="filter-buttons">
							<button class="filter-btn" :class="{ active: typeFilter === 'all' }" @click="setTypeFilter('all')">全部</button>
							<button class="filter-btn" :class="{ active: typeFilter === 'task' }" @click="setTypeFilter('task')">任务</button>
							<button class="filter-btn" :class="{ active: typeFilter === 'activity' }" @click="setTypeFilter('activity')">活动</button>
							<button class="filter-btn" :class="{ active: typeFilter === 'post' }" @click="setTypeFilter('post')">帖子</button>
						</view>
					</view>
					<view class="filter-group">
						<text class="filter-label">审核结果</text>
						<view class="filter-buttons">
							<button class="filter-btn" :class="{ active: statusFilter === 'all' }" @click="setStatusFilter('all')">全部</button>
							<button class="filter-btn success" :class="{ active: statusFilter === 'approved' }" @click="setStatusFilter('approved')">通过</button>
							<button class="filter-btn danger" :class="{ active: statusFilter === 'rejected' }" @click="setStatusFilter('rejected')">拒绝</button>
						</view>
					</view>
				</view>
				<view class="filter-row">
					<view class="search-box">
						<text class="search-icon iconfont icon-sousuo"></text>
						<input class="search-input" v-model="searchKeyword" placeholder="搜索内容标题或审核员..." @input="onSearchInput" />
					</view>
					<view class="date-picker">
						<text class="iconfont icon-riqi"></text>
						<picker mode="date" :value="dateRange.start" @change="onStartDateChange">
							<text>{{ dateRange.start || '开始日期' }}</text>
						</picker>
						<text>-</text>
						<picker mode="date" :value="dateRange.end" @change="onEndDateChange">
							<text>{{ dateRange.end || '结束日期' }}</text>
						</picker>
					</view>
				</view>
			</view>

			<!-- 审核记录列表 -->
			<view class="history-list">
				<view class="list-header">
					<text class="list-title">审核记录 ({{ filteredHistory.length }})</text>
					<button class="btn-refresh" @click="loadHistory">
						<text class="iconfont icon-shuaxin"></text>
					</button>
				</view>

			<view class="timeline">
				<view v-for="record in filteredHistory" :key="record._id" class="timeline-item">
					<view class="timeline-marker" :class="[record.audit_result, record.content_type]"></view>
						<view class="timeline-content">
							<view class="record-header">
								<view class="record-info">
									<text class="record-type" :class="record.content_type">{{ getTypeName(record.content_type) }}</text>
									<text class="record-title">{{ record.content_title }}</text>
								</view>
								<view class="record-result" :class="record.audit_result">
									{{ record.audit_result === 'approved' ? '已通过' : '已拒绝' }}
								</view>
							</view>
							
							<view class="record-body">
								<text class="record-desc">{{ record.content_desc || '无描述' }}</text>
								<view class="record-reason" v-if="record.audit_reason">
									<text class="reason-label">审核意见：</text>
									<text class="reason-text">{{ record.audit_reason }}</text>
								</view>
							</view>

							<view class="record-footer">
								<view class="auditor-info">
									<text class="iconfont icon-yonghu"></text>
									<text>审核员：{{ record.auditor_name || '系统' }}</text>
								</view>
								<view class="publisher-info">
									<text class="iconfont icon-fabu"></text>
									<text>发布者：{{ record.publisher_name || '未知' }}</text>
								</view>
								<text class="record-time">{{ formatTime(record.audit_time) }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="filteredHistory.length === 0" class="empty-state">
					<text class="empty-icon iconfont icon-kongxinwenjian"></text>
					<text class="empty-text">暂无审核记录</text>
				</view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'

export default {
	components: { AdminLayout },
	data() {
		return {
			searchKeyword: '',
			typeFilter: 'all',
			statusFilter: 'all',
		dateRange: {
			start: '',
			end: ''
		},
		historyList: [],
			loading: false
		}
	},
	computed: {
		filteredHistory() {
			let list = this.historyList
			
			// 类型筛选
			if (this.typeFilter !== 'all') {
				list = list.filter(record => record.content_type === this.typeFilter)
			}
			
			// 状态筛选
			if (this.statusFilter !== 'all') {
				list = list.filter(record => record.audit_result === this.statusFilter)
			}
			
			// 关键词搜索
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase()
				list = list.filter(record => 
					(record.content_title && record.content_title.toLowerCase().includes(keyword)) ||
					(record.auditor_name && record.auditor_name.toLowerCase().includes(keyword))
				)
			}
			
			// 日期范围筛选
			if (this.dateRange.start) {
				const startTime = new Date(this.dateRange.start).getTime()
				list = list.filter(record => record.audit_time >= startTime)
			}
			if (this.dateRange.end) {
				const endTime = new Date(this.dateRange.end).getTime() + 86400000 // 加一天
				list = list.filter(record => record.audit_time < endTime)
			}
			
			return list
		},
		
		// 实时统计数据 - 基于当前筛选的结果计算
		realTimeStats() {
			const now = new Date()
			// 今天的开始时间（00:00:00）
			const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime()
			// 本周的开始时间（周一00:00:00）
			const dayOfWeek = now.getDay() || 7 // 周日为0，转换为7
			const weekStart = new Date(now.getFullYear(), now.getMonth(), now.getDate() - dayOfWeek + 1).getTime()
			
			// 使用 filteredHistory 而不是 historyList，这样统计会随筛选变化
			const list = this.filteredHistory
			
			// 统计今日审核（从今天00:00开始）
			const todayCount = list.filter(record => {
				// 处理不同的时间格式
				const recordTime = typeof record.audit_time === 'string' 
					? new Date(record.audit_time).getTime() 
					: record.audit_time
				return recordTime >= todayStart
			}).length
			
			// 统计本周审核（从本周一00:00开始）
			const weekCount = list.filter(record => {
				// 处理不同的时间格式
				const recordTime = typeof record.audit_time === 'string' 
					? new Date(record.audit_time).getTime() 
					: record.audit_time
				return recordTime >= weekStart
			}).length
			
			// 统计通过和拒绝数量（基于筛选后的全部数据）
			const approvedCount = list.filter(record => record.audit_result === 'approved').length
			const rejectedCount = list.filter(record => record.audit_result === 'rejected').length
			const total = approvedCount + rejectedCount
			
			// 计算通过率和拒绝率
			const approveRate = total > 0 ? Math.round((approvedCount / total) * 100) : 0
			const rejectRate = total > 0 ? Math.round((rejectedCount / total) * 100) : 0
			
			return {
				today: todayCount,
				week: weekCount,
				approveRate: approveRate,
				rejectRate: rejectRate
			}
		}
	},
	onLoad() {
		this.loadHistory()
	},
	methods: {
		async loadHistory() {
			this.loading = true
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getAuditHistory'
					}
				})
				
			if (res.result && res.result.code === 0) {
				this.historyList = res.result.data || []
				console.log('加载的审核记录数:', this.historyList.length)
				if (this.historyList.length > 0) {
					console.log('第一条记录:', this.historyList[0])
					console.log('第一条记录的audit_time类型:', typeof this.historyList[0].audit_time)
					console.log('第一条记录的audit_time值:', this.historyList[0].audit_time)
				}
				} else {
					uni.showToast({ title: '加载失败', icon: 'none' })
				}
			} catch (e) {
				console.error('加载审核历史失败:', e)
				uni.showToast({ title: '加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		
		setTypeFilter(type) {
			this.typeFilter = type
		},
		
		setStatusFilter(status) {
			this.statusFilter = status
			console.log('设置状态筛选为:', status)
			console.log('筛选后的记录数:', this.filteredHistory.length)
		},
		
		onSearchInput() {
			// 实时搜索
		},
		
		onStartDateChange(e) {
			this.dateRange.start = e.detail.value
		},
		
		onEndDateChange(e) {
			this.dateRange.end = e.detail.value
		},
		
		exportHistory() {
			uni.showToast({ title: '导出功能开发中', icon: 'none' })
		},
		
		getTypeName(type) {
			const names = {
				task: '任务',
				activity: '活动',
				post: '帖子'
			}
			return names[type] || type
		},
		
		formatTime(timestamp) {
			if (!timestamp) return '-'
			const date = new Date(timestamp)
			return date.toLocaleString('zh-CN')
		}
	}
}
</script>

<style scoped>
.page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: 100vh;
}

/* 页面头部 */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.header-info .page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 8rpx;
	display: block;
}

.header-info .page-subtitle {
	font-size: 28rpx;
	color: #718096;
	display: block;
}

.btn-export {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: #fff;
	color: #3b82f6;
	border: 2rpx solid #3b82f6;
	border-radius: 16rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.2s ease;
}

.btn-export:hover {
	background: #3b82f6;
	color: #fff;
}

.btn-icon {
	font-size: 28rpx;
}

/* 统计概览 */
.stats-overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
	margin-bottom: 32rpx;
}

.stat-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	text-align: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border: 2rpx solid #f1f5f9;
}

.stat-label {
	font-size: 26rpx;
	color: #64748b;
	margin-bottom: 12rpx;
	display: block;
}

.stat-value {
	font-size: 48rpx;
	font-weight: 800;
	color: #1a202c;
}

.stat-value.success {
	color: #059669;
}

.stat-value.danger {
	color: #dc2626;
}

/* 筛选区域 */
.filter-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border: 2rpx solid #f1f5f9;
}

.filter-row {
	display: flex;
	gap: 24rpx;
	margin-bottom: 24rpx;
	align-items: flex-start;
}

.filter-row:last-child {
	margin-bottom: 0;
}

.filter-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16rpx;
}

.filter-label {
	font-size: 26rpx;
	color: #475569;
	font-weight: 600;
	white-space: nowrap;
	min-width: 100rpx;
}

.filter-buttons {
	display: flex;
	gap: 12rpx;
	flex-wrap: nowrap;
}

.filter-btn {
	padding: 12rpx 28rpx;
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #e2e8f0;
	border-radius: 12rpx;
	font-size: 26rpx;
	font-weight: 500;
	transition: all 0.3s ease;
	min-width: 100rpx;
	flex-shrink: 0;
}

.filter-btn:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.filter-btn.active {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border-color: #3b82f6;
	box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.4);
}

.filter-btn.success.active {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	border-color: #10b981;
	box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.4);
}

.filter-btn.danger.active {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	border-color: #ef4444;
	box-shadow: 0 4rpx 16rpx rgba(239, 68, 68, 0.4);
}

.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #f8fafc;
	border-radius: 16rpx;
	padding: 16rpx 24rpx;
	border: 2rpx solid #e2e8f0;
}

.search-icon {
	font-size: 32rpx;
	color: #64748b;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	color: #1a202c;
	background: transparent;
	border: none;
}

.date-picker {
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #f8fafc;
	border-radius: 16rpx;
	padding: 16rpx 24rpx;
	border: 2rpx solid #e2e8f0;
	font-size: 26rpx;
	color: #64748b;
}

/* 历史记录列表 */
.history-list {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border: 2rpx solid #f1f5f9;
}

.list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
	padding-bottom: 24rpx;
	border-bottom: 2rpx solid #e2e8f0;
}

.list-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a202c;
}

.btn-refresh {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: #f8fafc;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #64748b;
	transition: all 0.3s ease;
}

.btn-refresh:hover {
	background: #e2e8f0;
	transform: rotate(180deg);
}

/* 时间轴 */
.timeline {
	position: relative;
	padding-left: 80rpx;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 14rpx;
	top: 0;
	bottom: 0;
	width: 2rpx;
	background: #e2e8f0;
}

.timeline-item {
	position: relative;
	margin-bottom: 32rpx;
}

.timeline-item:last-child {
	margin-bottom: 0;
}

.timeline-marker {
	position: absolute;
	left: -80rpx;
	top: 24rpx;
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #94a3b8;
	z-index: 1;
	transition: all 0.2s ease;
	border: 2rpx solid #fff;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

/* 根据内容类型显示不同颜色 */
.timeline-marker.task {
	background: #f59e0b;
}

.timeline-marker.activity {
	background: #3b82f6;
}

.timeline-marker.post {
	background: #10b981;
}

/* 悬停时稍微放大 */
.timeline-item:hover .timeline-marker {
	transform: scale(1.3);
}

.timeline-content {
	background: #f8fafc;
	border-radius: 16rpx;
	padding: 24rpx;
	border: 2rpx solid #e2e8f0;
	transition: all 0.3s ease;
}

.timeline-content:hover {
	background: #fff;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16rpx;
}

.record-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.record-type {
	display: inline-block;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	font-size: 20rpx;
	font-weight: 600;
	width: fit-content;
}

.record-type.task {
	background: #fef3c7;
	color: #d97706;
}

.record-type.activity {
	background: #dbeafe;
	color: #2563eb;
}

.record-type.post {
	background: #d1fae5;
	color: #059669;
}

.record-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a202c;
}

.record-result {
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 600;
	white-space: nowrap;
}

.record-result.approved {
	background: #d1fae5;
	color: #059669;
}

.record-result.rejected {
	background: #fee2e2;
	color: #dc2626;
}

.record-body {
	margin-bottom: 16rpx;
}

.record-desc {
	font-size: 26rpx;
	color: #64748b;
	line-height: 1.6;
	display: block;
	margin-bottom: 12rpx;
}

.record-reason {
	background: #fff;
	border-radius: 12rpx;
	padding: 16rpx;
	border-left: 4rpx solid #3b82f6;
}

.reason-label {
	font-size: 24rpx;
	color: #64748b;
	margin-right: 8rpx;
}

.reason-text {
	font-size: 24rpx;
	color: #1a202c;
}

.record-footer {
	display: flex;
	gap: 24rpx;
	align-items: center;
	font-size: 22rpx;
	color: #94a3b8;
	padding-top: 16rpx;
	border-top: 1rpx solid #e2e8f0;
}

.auditor-info, .publisher-info {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.record-time {
	margin-left: auto;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 40rpx;
}

.empty-icon {
	font-size: 120rpx;
	color: #cbd5e1;
	margin-bottom: 24rpx;
}

.empty-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #64748b;
}

/* 响应式 */
@media (max-width: 900px) {
	.stats-overview {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.filter-row {
		flex-direction: column;
	}
}
</style>

